//厦门大学计算机专业 | 前华为工程师
//专注《零基础学编程系列》  http://lblbc.cn/blog
//包含：Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙
//公众号：蓝不蓝编程
<template>
    <view class="page-wrapper">
        <scroll-view class="tab-row" :scroll-x="true">
            <view :class="'tab  ' + (index == current ? 'tab-selected' : '')" @tap="tabSelect" :data-id="index" v-for="(item, index) in tabs" :key="item.k">
                {{ item }}
            </view>
        </scroll-view>
        <view class="split-view"></view>

        <view class="order-info" v-for="(orderItem, index) in orderList" :key="orderItem.id">
            <view class="saler-row">
                <view class="saler-info">
                    <view class="saler-name">蓝不蓝自营</view>
                    <image class="right-arrow" src="/static/images/right_arrow.png"></image>
                </view>
            </view>

            <view class="goods-row" @tap="gotoOrderDetail" :data-id="orderItem.orderId" v-for="(item, index1) in orderItem.list" :key="item.k">
                <image class="goods-img" :src="item.squarePic" mode="aspectFit"></image>

                <view class="goods-desc">
                    <view class="goods-name">{{ item.name }}</view>
                    <view class="price-row">
                        <view class="goods-price">￥{{ item.price / 100 }}</view>
                        <view>×{{ item.quantity }}</view>
                    </view>
                    <view class="tags">
                        <view class="seven-days">7天无理由退货</view>
                    </view>
                </view>
            </view>

            <view class="goods-info-split"></view>

            <view class="btn-row">
                <view class="del-order" @tap="delOrder" :data-id="orderItem.orderId">删除订单</view>
            </view>
        </view>
    </view>
</template>
<script>
import { queryOrderList, delOrder } from '@/common/api'
export default {
    data() {
        return {
            orderList: [],
            tabs: ['全部', '待付款', '待发货', '待收货', '待评价', '退还/售后'],
            current: 0,
        };
    },
    onLoad: function (option) {
        this.current = option.status
    },
    onShow: function () {
        this.queryOrder();
    },
    methods: {
        tabSelect: function (e) {
            this.current = e.currentTarget.dataset.id;
            this.queryOrder();
        },

        queryOrder() {
            let _this = this;
			queryOrderList(this.current).then(resp => {
				if (!resp.data.code) {
					this.orderList = resp.data.data
				}
			})
        },

        gotoOrderDetail(e) {
            let orderId = e.currentTarget.dataset['id'];
            uni.navigateTo({
                url: '/pages/order/order-detail/order-detail?id=' + orderId
            });
        },

        delOrder(e) {
            let orderId = e.currentTarget.dataset['id'];
			delOrder(orderId).then(resp => {
				if (!resp.data.code) {
					this.queryOrder();
				}
			})
        }
    }
};
</script>
<style>
page {
    background-color: #f4f4f4;
}

.page-wrapper {
    margin: 0;
    font-size: 28rpx;
    line-height: 1.5;
    color: #333;
    overflow-x: hidden;
    margin-bottom: 10rpx;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
}

.tab-row {
    padding-top: 30rpx;
    width: 720rpx;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    white-space: nowrap;
    background-color: white;
}

.tab {
    width: 120rpx;
    margin-left: 10rpx;
    margin-right: 10rpx;
    display: inline-block;
    padding-bottom: 10rpx;
    text-align: center;
}

.tab-selected {
    border-bottom: 4rpx solid;
    color: #ef3965;
}

.split-view {
    height: 30rpx;
}

.order-info {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 20rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
    padding: 20rpx;
}

.saler-row {
    display: flex;
    flex-direction: row;
}

.saler-info {
    flex: 1;
    display: flex;
    flex-direction: row;
}

.saler-name {
    color: #222222;
}

.right-arrow {
    height: 40rpx;
    width: 40rpx;
}

.status {
    color: #97999e;
}

.goods-row {
    display: flex;
    flex-direction: row;
    margin-top: 30rpx;
}

.goods-img {
    margin-left: 40rpx;
    width: 200rpx;
    height: 200rpx;
}

.goods-desc {
    display: flex;
    flex-direction: column;
    margin-left: 40rpx;
}

.goods-name {
    font-size: 35rpx;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.price-row {
    display: flex;
    flex-direction: row;
    margin-top: 10rpx;
}

.goods-price {
    color: #222222;
    flex: 1;
}

.tags {
    display: flex;
    flex-direction: row;
    margin-top: 10rpx;
}

.seven-days {
    color: #677da5;
    background-color: #eaf3ff;
    border-radius: 10rem;
    padding: 5rpx 10rpx;
}

.goods-info-split {
    margin-top: 20rpx;
    width: 100%;
    height: 1rpx;
    background-color: #dfdfdf;
}

.btn-row {
    display: flex;
    flex-direction: row;
    margin-top: 20rpx;
    justify-content: flex-end;
}

.del-order {
    margin-right: 30rpx;
    border-radius: 10rem;
    padding: 5rpx 20rpx;
    color: #575e64;
    border: 1rpx solid #ebebeb;
}
</style>
